import useInstance from '@/hooks/useInstance'
import { EditType, Title } from '@/types/BaseEnum'
import { DialogModel } from '@/types/BaseType'
import { ElForm } from 'element-plus'
import type { UploadProps } from 'element-plus'
import { onBeforeMount, reactive, ref } from 'vue'
import { StatusCode } from '@/http/request'
import { ReplyModel, SelectReplyGroup } from '@/api/custcare/reply/ReplyModel'
import {
    getReplySortApi,
    getSelectReplyGroupListApi
} from '@/api/custcare/reply/reply'
import { getToken } from '@/utils/auth'
import { getUploadUrlApi } from '@/api/cms/article/article'

export default function useReplyAddAndEdit(
    dialogModel: DialogModel,
    onShow: any,
    onClose: any,
    addModel: ReplyModel,
    emit: any
) {
    const { global } = useInstance()

    const uploadUrl = ref('')

    const headerObj = { Authorization: 'Bearer ' + getToken() }

    // 表单ref属性
    const addReplyForm = ref<InstanceType<typeof ElForm>>()

    const replyGroupData = reactive({
        data: Array<SelectReplyGroup>()
    })

    const onConfirm = () => {
        addReplyForm.value?.validate((valid) => {
            if (valid) {
                emit('save', addModel)
                onClose()
            }
        })
    }

    // 展示弹框
    const show = async (type: string, row?: ReplyModel) => {
        // 设置弹框的标题
        type == EditType.ADD
            ? (dialogModel.title = Title.ADD)
            : (dialogModel.title = Title.EDIT)

        // 显示弹框
        onShow()
        // 清空表单
        global.$resetForm(addReplyForm.value, addModel)
        // 把要编辑的数据，放到表单绑定的model里面
        global.$objCoppy(row, addModel)

        if (type == EditType.ADD) {
            await getReplySort()
        }

        // 设置type
        addModel.editType = type
    }

    // 获取自sort最大值
    const getReplySort = async () => {
        let res = await getReplySortApi()
        if (res && res.code == StatusCode.Success) {
            addModel.sort = res.data.sort + 1
        }
    }

    const sortHandleChange = (value: number) => {
        console.log(value)
    }

    // 获取回复分组数据
    const getSelectReplyGroupList = async () => {
        let res = await getSelectReplyGroupListApi()
        if (res && res.code == StatusCode.Success) {
            replyGroupData.data = res.data
        }
    }

    const handleImgSuccess: UploadProps['onSuccess'] = (
        response,
        uploadFile
    ) => {
        // console.log('upload response', response)
        // console.log('uploadFile=', uploadFile)
        // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
        console.log(uploadFile)
        addModel.img = response.data[0]
    }

    const beforeImgUpload: UploadProps['beforeUpload'] = (rawFile) => {
        // console.log('rawFile=' + rawFile)
        // image/jpeg image/png
        if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png') {
            if (rawFile.size / 1024 / 1024 > 4) {
                global.$message({
                    message: '图片大小不能超过4MB！',
                    type: 'error'
                })
                return false
            }
            return true
        } else {
            global.$message({
                message: '必须是JPG、PNG格式的图片！',
                type: 'error'
            })
            return false
        }
    }

    const getUploadUrl = () => {
        uploadUrl.value = getUploadUrlApi()
    }

    onBeforeMount(async () => {
        await getUploadUrl()
        await getSelectReplyGroupList()
    })

    return {
        replyGroupData,
        onConfirm,
        show,
        sortHandleChange,
        addReplyForm,
        getReplySort,
        uploadUrl,
        headerObj,
        handleImgSuccess,
        beforeImgUpload
    }
}
